{extend name="public/common"}
{block name="style"}
<title>党务公开</title>
<link rel="stylesheet" href="/home/css/party/index.css">
<style>
    .default {
        height: 42vh;
    }
    .default img {
        width: 16vw;
        position: absolute;
        left: 50%;
    }
    .showbox {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5%;
        background: rgba(0, 0, 0, 0.3);
    }

    .loader {
        position: relative;
        margin: 0 auto;
        width: 100px;
        margin-top: 70%;
    }
    .loader:before {
        content: '';
        display: block;
        padding-top: 50%;
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color {
        100%,
        0% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%,
        90% {
            stroke: #ffa700;
        }
    }
</style>
{/block}
{block name="body"}
<div class="scroll" style="display: none;position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
    <div class="banner">
        <img src="/home/images/index/banner.png">
    </div>
    <div class="nav">
        <span>政务公开</span>
        <span>党务公开</span>
        <span>财务公开</span>
    </div>
    <div class="village">
        <div class="lists">
            {empty name="list1"}
            <div class="default"><img src="/home/images/common/nomessage.png" style="margin-top:20vw"></div>
            {else/}
            <!--开始循环-->
            {volist name="list1" id="vo"}
            <a href="{:Url('Party/detail?id='.$vo['id'])}" class="listes">
                <div class="left">
                    <p class="title">{$vo.title}</p>
                    <p class="content">{$vo.description}</p>
                    <div class="bottom">
                        <span class="people">{$vo.publisher}</span>
                        <span class="time">{$vo.time}</span>
                    </div>
                </div>
                <div class="right">
                    <img src="{$vo.front_cover|get_covers='path'}">
                </div>
                <div class="border"></div>
            </a>
            {/volist}
            <!--结束循环-->
            {/empty}
        </div>
    </div>
    <div class="village hidden">
        <div class="lists">
            {empty name="list2"}
            <div class="default"><img src="/home/images/common/nomessage.png" style="margin-top:20vw"></div>
            {else/}
            <!--开始循环-->
            {volist name="list2" id="vo"}
            <a href="{:Url('Party/detail?id='.$vo['id'])}" class="listes">
                <div class="left">
                    <p class="title">{$vo.title}</p>
                    <p class="content">{$vo.description}</p>
                    <div class="bottom">
                        <span class="people">{$vo.publisher}</span>
                        <span class="time">{$vo.time}</span>
                    </div>
                </div>
                <div class="right">
                    <img src="{$vo.front_cover|get_covers='path'}">
                </div>
                <div class="border"></div>
            </a>
            {/volist}
            <!--结束循环-->
            {/empty}
        </div>
    </div>
    <div class="village hidden">
        <div class="lists">
            {empty name="list3"}
            <div class="default"><img src="/home/images/common/nomessage.png" style="margin-top:20vw"></div>
            {else/}
            <!--开始循环-->
            {volist name="list3" id="vo"}
            <a href="{:Url('Party/detail?id='.$vo['id'])}" class="listes">
                <div class="left">
                    <p class="title">{$vo.title}</p>
                    <p class="content">{$vo.description}</p>
                    <div class="bottom">
                        <span class="people">{$vo.publisher}</span>
                        <span class="time">{$vo.time}</span>
                    </div>
                </div>
                <div class="right">
                    <img src="{$vo.front_cover|get_covers='path'}">
                </div>
                <div class="border"></div>
            </a>
            {/volist}
            <!--结束循环-->
            {/empty}
        </div>
    </div>
    <div class="tip"></div>
    <div class="loading hidden">
        <div class="typing_loader"></div>
    </div>
</div>
<div class="showbox" >
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
{/block}
{block name="script"}
<script src="/home/js/reset.js"></script>
<script>
    $("title").text("党务公开");
    if( document.body.clientWidth>1000) {
        var time = null;
        clearInterval(time);
        time = setInterval(function () {
            $(".scroll").show();
            $(".showbox").hide();
        }, 1500);
    }else{
        $(".scroll").show();
        $(".showbox").hide();
    }
    $(function(){
        $(".scroll").off("scroll" ).on("scroll",function(){
            if($(".scroll").scrollTop()>$(".banner").height()){
                $(".nav").addClass("fixed");
            }else{
                $(".nav").removeClass("fixed");
            }
        })
        c = getCookie("c")?getCookie("c"):0;
        $(".nav span").eq(c).addClass('active');
        $(".village").eq(c).removeClass("hidden").siblings(".village").addClass("hidden")
        var len  = $(".village").eq(c).find(".listes").length;
        if(len >=12){
            $('.tip').text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);
        }else{
            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
            $('.tip').hide();
        }
        $(".nav span").click(function(){
            var index=$(this).index();
            $(this).addClass("active").siblings("span").removeClass("active");
            $(".village").eq(index).removeClass("hidden").siblings(".village").addClass("hidden");
            var len  = $(".village").eq(index).find(".listes").length;
            if(len >=12){
                $('.tip').text('上拉加载更多');
                document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);
            }else{
                document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                $('.tip').hide();
            }
            setCookie("c",index)
        });

    });
    var scrollNow = true;
    var handleScroll = function() {
        var type = parseInt(c)+1;
        var tip = $(".tip");
        var loading = $('.loading');
        var len  = $(".village").eq(type-1).find(".listes").length;
        var el = document.getElementsByClassName("scroll")[0];
        if(el.scrollTop + el.offsetHeight +2 >= el.scrollHeight && scrollNow){
            scrollNow = false;
            tip.show().text('上拉加载更多');
            $.ajax({
                type: 'post',
                url: "{:Url('Party/listMore')}",
                data: {
                    length:len,
                    type:type
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success: function (res) {
                    loading.toggleClass('hidden');
                    tip.show();
                    console.log(res);
                    if(res.code == 1){
                        addList(res,type);
                        if(res.data.length==12){
                            tip.text('上拉加载更多');
                        }else{
                            tip.text('没有更多了');
                            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                        }
                    }else{
                        tip.text('没有更多了');
                        document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                    }
                    scrollNow = true;
                }
            });
        }
    };
    function addList(res,type){
        var html = '';
        var lists = res.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
             html +='<a href="/home/party/detail/id/'+list.id+'.html" class="listes">' +
                 '<div class="left">' +
                 '<p class="title">'+list.title+'</p>' +
                 '<p class="content">'+list.description+'</p>' +
                 '<div class="bottom">' +
                 '<span class="people">'+list.publisher+'</span>' +
                 '<span class="time">'+list.time+'</span>' +
                 '</div>' +
                 '</div>' +
                 '<div class="right">' +
                 '<img src="'+list.img+'">' +
                 '</div>' +
                 '<div class="border">' +
                 '</div>' +
                 '</a>'
        }
        $('.village').eq(type-1).find(".lists").append(html);
    }
    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                , totalScroll = el.scrollHeight
                , currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function(evt) {
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    }

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });
    var timeOutEvent=0;
    $(function(){
        $(".nav span").each(function() {
            var that = $(this);
            $(this).on({
                touchstart: function (e) {
                    timeOutEvent = setTimeout(function(){
                        timeOutEvent = 0;
                        that.addClass("press");
                    }, 500);
                },
                touchmove: function () {
                    clearTimeout(timeOutEvent);
                    timeOutEvent = 0;
                    that.removeClass("press").addClass("ripple");
                },
                touchend: function () {
                    that.removeClass("press").addClass("ripple");
                    clearTimeout(timeOutEvent);
                    if (timeOutEvent != 0) {

                    }
                }
            })
        })
    });
</script>
{/block}